<template>
  <div class="box">
    <el-col :span="3">
      <el-menu
        default-active="demand2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
      >
        <el-menu-item index="demand2">
          <span>活动列表</span>
        </el-menu-item>
        <el-menu-item index="demand3">
          <span>用户群管理</span>
        </el-menu-item>
        <el-menu-item index="demand4">
          <span>标签库管理</span>
        </el-menu-item>
        <el-menu-item index="demand5">
          <span>算法题目</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <div class="content">
      <div class="breadcrumb">活动管理 > {{ currentValue }}</div>
      <component v-bind:is="currentView"> </component>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import demand2 from './demand2/index.vue'
import demand3 from './demand3/index.vue'
import demand4 from './demand4/index.vue'
import demand5 from './demand5/index.vue'

const currentView = ref(demand2)
const currentValue = ref('活动列表')
const tabComponents = ref({
  demand2: demand2,
  demand3: demand3,
  demand4: demand4,
  demand5: demand5
})
const handleSelect = item => {
  // 写成下面这种不会渲染出组件,因为v-bind:is="currentView"中的currentView需为组件数据
  // currentView.value = item
  let obj = {
    demand2: '活动列表',
    demand3: '用户群管理',
    demand4: '标签库管理',
    demand5: '算法题目'
  }
  currentValue.value = obj[item]
  console.log(item)
  currentView.value = tabComponents.value[item]
  console.log(currentView.value)
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
}
.el-menu {
  height: calc(100vh - 64px);
}
.content {
  padding: 20px;
  width: 100%;
}
.breadcrumb {
  margin-bottom: 10px;
  font-weight: 600;
}
</style>
